<template>
  <div v-show="count > 0 && operations.length > 0" class="toolbar">
    <i class="el-icon-warning" style="color: #1890ff; font-size: 18px; margin-right: 10px;" />
    <span class="toolbar-text">
      Selected {{ count }} item{{ count > 1 ? 's' : '' }}
    </span>

    <template v-for="operation in operations">
      <el-button type="text" :class="operation.class" @click="$emit(operation.action)">
        <template v-if="true">
          {{ operation.action.charAt(0).toUpperCase() + operation.action.slice(1) }}
        </template>
        <template v-else>
          {{ operation.action }}
        </template>
      </el-button>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      require: true,
      type: Number,
      default: 0
    },
    operations: {
      require: true,
      type: Array,
      default: []
    }
  }
}
</script>

<style lang="scss" scoped>
  .toolbar {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    width: 100%;
    padding: 0px 20px;
    background-color: #e7f4ff;
    border: 1px solid rgba(24, 144, 255, 0.2);
    border-radius: 4px;
    font-size: 14px;
    .toolbar-text {
      margin-right: 20px;
    }
    .toolbar-delete {
      color: #ff5733;
    }
  }

</style>
